<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>facebook Authentication</title>
</head>
<style>
    body,html{
        background-color:#252525;
    }
    .auth-title{
        margin-top:100px;
        font-size: 20px;
        text-align: center;
        color: #fff;
    }
    .btns{
        cursor: pointer;
        text-align: center;
        color: #fff;
        height: 30px;
        text-decoration: none;
        line-height: 30px;
        min-width: 76px;
        font-size: 12px;
        border-radius: 4px;
        padding: 0 5px;
        margin-right: 10px;
    }
    .greenBtn {
        border: 1px solid #0F620A;
        background-color: #0c6;
        color: #fff;
    }
    .popupOperationBtn:first-child {
        margin-right: 48px;
    }
    .grayBtn {
        border: 1px solid #524C4C;
        background-color: #a0a0a0;
        color: #fff;
    }
    .button{
        padding-top:50px;
        text-align: center;
    }
</style>
<body>
<p class="auth-title">Do you want to visit Facebook?</p>
<p class="button">
    <input type="button" class="btns greenBtn popupOperationBtn add-count" value="YES" onclick="alertFb()">
    <input type="button" value="NO" class="btns grayBtn popupOperationBtn" onclick="cancel()">
</p>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/aes.js?version=1.2"></script>
<script src="./js/pad-iso10126-min.js?version=1.2"></script>
<script>
    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
    // window.onload = function(){
    //     alertFb();
    // }
    function alertFb(){
        if(!window.FB){
            alertFb()
            return false;
        }
        FB.init({
            appId: '1713053685635172',
            xfbml: true,
            version: 'v2.8'
        });
        FB.login(function(response) {
            if (response && !response.error_message && response.status == 'connected') {
                var userId = response.authResponse.userID;
                var username;
                FB.api('/me', function(user_response) {
                    username = user_response.name;
                    var access_token = response.authResponse.accessToken;
                    access_token  = pushAboutInfo.getAesString(access_token,pushAboutInfo.pwd_1,pushAboutInfo.iv_1);
                    var params = {
                        "userId":userId,
                        "access_token":access_token,
                        "username":username,
                        "cancel":false,
                    }
                    parent.postMessage(JSON.stringify(params),"*");
                });
            }
        }, {scope: 'publish_video,publish_pages,manage_pages'});
        var pushAboutInfo = {
            pwd_1 :'625202f9869e068d',
            iv_1  :'5efd8f6060e20880',
            pwd_2 :'1020304050607080',
            iv_2  :'a1b2c3d4e5f6g7h8',
            /*Use AES to encrypt a string*/
            getAesString:function(data,key,iv){//加密
                var sendData = CryptoJS.enc.Utf8.parse(data);
                key  = CryptoJS.enc.Utf8.parse(key);
                iv   = CryptoJS.enc.Utf8.parse(iv);
                var encrypted = CryptoJS.AES.encrypt(sendData,key,
                    {
                        iv:iv,
                        mode:CryptoJS.mode.CBC,
                        padding:CryptoJS.pad.Iso10126
                    });
                return CryptoJS.enc.Base64.stringify(encrypted.ciphertext);
            },
            getDAesString:function(encrypted,key,iv){
                var key  = CryptoJS.enc.Utf8.parse(key);
                var iv   = CryptoJS.enc.Utf8.parse(iv);
                var decrypted = CryptoJS.AES.decrypt(encrypted,key,
                    {
                        iv:iv,
                        mode:CryptoJS.mode.CBC,
                        padding:CryptoJS.pad.Iso10126
                    });
                return decrypted.toString(CryptoJS.enc.Utf8);
            }
        }
    }
    function cancel(){
        var params = {
            "cancel":true
        }
        parent.postMessage(JSON.stringify(params),"*");
    }
</script>
</html>